<template>
    <info-card class="card center-order">
        <div class="title" slot="title">
            我的订单
        </div>
        <div class="order-list">
            <list-item 
                v-for="(item, index) in tableData"
                :key="index"
                :data="item"
                @del="delHandler(index)"
                @reload="reloadHandler"
            ></list-item>

            <empty-list theme="cold" v-if="!tableData.length">
                暂无订单信息，
                <a href="/user/center">下单体验</a>
            </empty-list>
        </div>

        <btn-loadmore
            ref="page"
            v-model="tableData"
            :action="`${$store.state.api.webUrl}/myorders/getlist.json`"
            :search="pgData"
        ></btn-loadmore>
    </info-card>
</template>

<script>
import InfoCard from '../components/info-card.vue';
import BtnLoadmore from '@components/sys/btn-loadmore';
import EmptyList from '@components/sys/empty-list';

import ListItem from './components/list-item';

export default {
    layout: 'client-user',
    components: {
        InfoCard,
        BtnLoadmore,
        EmptyList,
        ListItem,
    },
    data() {
        return {
            tableData: [],

            pgData: {
                size: 6,
            },
        };
    },
    computed: {
        
    },
    methods: {
        delHandler(index) {
            // this.tableData.splice(index, 1);
            this.reloadHandler();
        },
        reloadHandler() {
            this.$refs.page.outerReload();

            this.$store.dispatch('userinfo/queryUserInfo', {
                requery: true
            });
        },
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';    


    .center-order {
        .title {
            font-weight: 600;
            margin-bottom: 10px;
        }
        .order-list{
            margin-top: 10px;
        }
    }
</style>